<template>
<div class="event-schedule">	
	<!--布局逻辑依赖数据结构关系比较严重 ,如需多处结构修改,建议重写-->
		<div class="zero">
			<div class="final" v-for="order in orderList" v-if="hasOrder(pageData,order)">
				<div class="final-img">
					<i class="el-icon-star-on other1"
						:class='{
							"zong1":order==orderList[0],
							"ban1":order==orderList[1],
							"san1":order==orderList[orderList.length-3],
							"er1":order==orderList[orderList.length-2],
							"yi1":order==orderList[orderList.length-1]}'>
					</i>
					<span class="other1" :class='{
							"zong1":order==orderList[0],
							"ban1":order==orderList[1],
							"san1":order==orderList[orderList.length-3],
							"er1":order==orderList[orderList.length-2],
							"yi1":order==orderList[orderList.length-1]}'> {{order}}
						
					</span>
				</div>
				<div class="final-table" >
					<table border="0" cellspacing="0" cellpadding="0">
						<tr class="table-header other"
							:class='{"zong":order==orderList[0],
								"ban":order==orderList[1],
								"san":order==orderList[orderList.length-3],
								"er":order==orderList[orderList.length-2],
								"yi":order==orderList[orderList.length-1]}'>
								
							
							<th class="table-header1">比赛轮次</th>
							<th class="table-header2">状态</th>
							<th class="table-header3">比赛日期</th>
							<th class="table-header4">比赛球队</th>
							
						</tr>
						<!--A组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[0],groupLast[0])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[0],groupLast[0])[0].groupName==groupOut[0] || filtOrderGroup(pageData,order,groupOut[0],groupLast[0])[0].groupName==groupLast[0] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[0],groupLast[0])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[0],groupLast[0])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						<!--B组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[1],groupLast[1])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[1],groupLast[1])[0].groupName==groupOut[1] || filtOrderGroup(pageData,order,groupOut[1],groupLast[1])[0].groupName==groupLast[1] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[1],groupLast[1])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[1],groupLast[1])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
						</tr>
						<!--C组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[2],groupLast[2])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[2],groupLast[2])[0].groupName==groupOut[2] || filtOrderGroup(pageData,order,groupOut[2],groupLast[2])[0].groupName==groupLast[2] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[2],groupLast[2])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[2],groupLast[2])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						<!--D组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[3],groupLast[3])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[3],groupLast[3])[0].groupName==groupOut[3] || filtOrderGroup(pageData,order,groupOut[3],groupLast[3])[0].groupName==groupLast[3] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[3],groupLast[3])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[3],groupLast[3])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						<!--E组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[4],groupLast[4])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[4],groupLast[4])[0].groupName==groupOut[4] || filtOrderGroup(pageData,order,groupOut[4],groupLast[4])[0].groupName==groupLast[4] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[4],groupLast[4])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[4],groupLast[4])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						<!--F组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[5],groupLast[5])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[5],groupLast[5])[0].groupName==groupOut[5] || filtOrderGroup(pageData,order,groupOut[5],groupLast[5])[0].groupName==groupLast[5] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[5],groupLast[5])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[5],groupLast[5])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								<img width="30" :src="item.blueTeamIcon||initImg"  />
								<span>{{item.blueTeamName}}</span>
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						<!--G组-->
						<tr @click="goto('EventDetails',{id:item.scheduleId})" class="table-body" v-for="(item,index) in filtOrderGroup(pageData,order,groupOut[6],groupLast[6])[0].competition" 
							v-if="filtOrderGroup(pageData,order,groupOut[6],groupLast[6])[0].groupName==groupOut[6] || filtOrderGroup(pageData,order,groupOut[6],groupLast[6])[0].groupName==groupLast[6] ">

							<td class="table-body1" :rowspan="filtOrderGroup(pageData,order,groupOut[6],groupLast[6])[0].competition.length"
								v-if="index==0">
								
								{{filtOrderGroup(pageData,order,groupOut[6],groupLast[6])[0].groupName}}</td>
							<td class="table-body2 ">{{item.scheduleId?'已结束':'未开始'}}</td>
							<td class="time ">{{item.time?(item.time|initData):'0'}}</td>
							<td class="table-body3 ">
								<img width="30" :src="item.redTeamIcon||initImg" alt="" />
								<span>{{item.redTeamName}}</span>
								
									<b class="score">{{item.redScore}} :  {{item.blueScore}}</b>
								
									<img width="30" :src="item.blueTeamIcon||initImg"  />
									<span>{{item.blueTeamName}}</span>
								
								


								
								<i>
									<!--此处缺少一个是否已上传视频标记属性,根据属性 确定显示不显示一个小录像图标-->
									<img src=""  />
								</i>
							</td>
							
						</tr>
						
								
					</table>
				</div>
			</div>
		</div>
		
		
</div>
	
	
</template>

<script>
	import playerDetails from '@/pages/PlayerDetails'
	
	export default{
		name:'EventSchedule',
		data(){
		  return{
			dataUrl:'http://101.37.33.145:3100/weixin/getLeagueScheduleView.do',
			leagueId:'a1206801-bb2a-48bf-8b26-0d6e7d3ae6a0',
			pageData:[
				{
					"competition":[
						{
							"blueScore":0,
							"blueTeamIcon":"",
							"blueTeamName":"",
							"groupName":"",
							"redScore":5,
							"redTeamIcon":"",
							"redTeamName":"初一1班2队",
							"roundName":"",
							"scheduleId":"",
							"time":""
						},{
							"blueScore":0,
							"blueTeamIcon":"",
							"blueTeamName":"",
							"groupName":"",
							"redScore":5,
							"redTeamIcon":"",
							"redTeamName":"初一1班2队",
							"roundName":"",
							"scheduleId":"",
							"time":""
						},{
							"blueScore":0,
							"blueTeamIcon":"",
							"blueTeamName":"",
							"groupName":"",
							"redScore":4,
							"redTeamIcon":"",
							"redTeamName":"初一1班2队",
							"roundName":"",
							"scheduleId":"",
							"time":""
						}
					],
					"groupName":"A组",
					"title":"第一轮"
				}
			],
//			如需维护只需要更改这三个属性与后台返回值对应关系
			orderList:['总决赛','半决赛','淘汰赛','第九轮','第八轮','第七轮','第六轮','第五轮','第四轮','第三轮','第二轮','第一轮'],
			groupOut:['A组','B组','C组','D组','E组','F组','G组','H组'],
			groupLast:['第一回合','第二回合','第三回合','第四回合','第五回合','第六回合','第七回合']
		
		  }
		 },
		props:["comId"],
		mounted:function(){
			sessionStorage.navActive='EventSchedule'
			
			console.log(this.comId);
			this.getData()
				
		},
		updated(){
		
		},
		methods:{
			getData:function(){
				this.$axios.post(
					this.dataUrl,
					{
						parmas:{
							leagueId:this.comId
						}
					}
					
				).then(
					res=>{
						console.log('赛事赛程也的请求成功了');
						this.pageData=res.data.datas;
						
					}
				).catch(
					err=>console.log(err.message,'赛事赛程也的请求成功了')
				)
			},
			hasOrder:function(arr,str){
				return arr.some(val=>val.title==str)
			},
			filtOrderGroup:function(arr,str,groupOut,groupLast){
				let newArr = arr.filter(val=>val.groupName==groupOut||val.groupName==groupLast &&val.title==str);
				let noInfo =[{competition:0}];//为了解决为空数组空对象时报错找不到对应属性 的error
				return newArr.length>0?newArr:noInfo;
			},
			goto(str,obj){
				this.$router.push({name:str,params:{id:obj.id,name:obj.name} });
				this.navGo('TeamPerformance')
			},
			navGo(str){
				sessionStorage.navActive=str;
			},
		},
		components:{
			playerDetails
		}
	}
</script>

<style scoped="scoped">
			.table-body3{
				position: relative;
				text-align: center;
			}
			.table-body3>span{
				
			}
			.vidoeIcon{
			
				position:absolute;
				right:15px;
				top: 12px;
			}
			table{
				padding: 0;
				margin: 0;
				font-size: 14px;
				border-right: 1px solid #E4E4E4;
				
			}
			img{
				vertical-align: middle;
			}
			td{
				
				line-height: 50px;
				border-left:1px solid #E4E4E4 ;
				border-bottom:1px solid #E4E4E4 ;
			}
			th{
				line-height: 30px;
			}
			
			.event-schedule{
				
				width: 100%;
				height: auto;
				box-sizing: border-box;
				overflow: hidden;
			}
			
			.zero{
				width: 100%;
				height: auto;
				margin: 0 auto;	
				margin-top: -24px;
			}
			.zero .final{
				width: 100%;
				height:auto;	
			}
			.zero .final div.final-img{
				padding-top: 30px;
				width: 100%;
				margin-right: 13px;
			}
			.zero .final div.final-img span{
				display: inline-block;
				
			}
			.final-table{
				width: 100%;
			}
			.final-table table{
				margin-top: 30px;
				width: 100%;
			}
		
			.final-table table .table-header{
			
				color: white;
			}
			.final-table table .table-header1{
				width: 200px;
				text-align: center;
			} 
			.final-table table .table-header2{
				width: 167px;

			}
			.final-table table .table-header3{
				width: 300px;

			}
			.final-table table .table-header4{
				width: 532px;
	
			}
			.final-table table .table-body{
				width: 100%;
				text-align: center;
			} 
			.final-table table .table-body1{
				width: 200px;
			}
			.final-table table .table-header3{
				width: 300px;
			}
			.table-body3 p img{
				width: 20px;
			}
			.table-body3 i img{
				width: 20px;	
			}
			.table-body3>span{
				display: inline-block;
				width: 22%;
				text-align: center;	
			}
			.score{
				padding: 0 25px;
				font-size:16px ;
				font-weight: 500;
			
			}
			/*banjuesai*/
			.other1{
				color: #01BBD4 !important;	
			}
			.other{
				background-color: #01BBD4 !important;
			
				
			}
			.zong1{
				color: #fc2e00 !important;	
			}
			
			.ban1{
				color: #ff7111 !important;
			}
			.san1{
				color: #199ed7 !important;
			}
			.er1{
				color: #019934 !important;
			}
			.yi1{
				color: #01af96 !important;
			}
			.zong{
				background:  #fc2e00 !important;
				
			}
			.ban{
				background-color: #ff7111 !important;
			}
			.san{
				background: #199ed7 !important;
			}
			.er{
				background: #019934 !important;
			}
			.yi{
				background-color: #01af96 !important;
			}
			.w200{
				width: 200px;
			}
			.w167{
				width: 167px;
			}
			.w300{
				width: 300px;
			}
	</style>
	